@name: yc-cron-checkbox;
@primaryColor: #409eff;
@borderColor: #a0a0a0;
.@{name} {
  display: inline-flex;
  align-items: center;
  & > input {
    display: none;
  }
  &.is-checked {
    .@{name} {
      &__item {
        border-color: @primaryColor;
        background-color: @primaryColor;
        &::after {
          transform: rotate(45deg) scaleY(1);
        }
      }
      &__label {
        color: @primaryColor;
      }
    }
  }
  &__item {
    display: inline-block;
    position: relative;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    background-color: #fff;
    z-index: 1;
    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46), background-color .25s cubic-bezier(.71,-.46,.29,1.46);
    cursor: pointer;
    &::after {
      box-sizing: content-box;
      content: "";
      border: 1px solid #fff;
      border-left: 0;
      border-top: 0;
      height: 7px;
      left: 4px;
      position: absolute;
      top: 1px;
      transform: rotate(45deg) scaleY(0);
      width: 3px;
      transition: transform .15s ease-in .05s;
      transform-origin: center;
    }
  }
  &__label {
    padding-left: 5px;
  }
}
